import { TabBar } from 'antd-mobile'
import './tab.less'
import { useLocation, useNavigate } from 'react-router-dom'
import IconHomeActive from '@/assets/images/tabbar/home_1.png'
import IconHome from '@/assets/images/tabbar/home_2.png'
import IconMyActive from '@/assets/images/tabbar/my_1.png'
import IconMy from '@/assets/images/tabbar/my_2.png'
import IconFast from '@/assets/images/tabbar/fast.png'

// 可以写一个函数判断当前路由是否是 三者之一
// function a (pathname){
//   if(pathname === '/home' || pathname == '/fast' || pathname == '/mine') {
//     return true
//   }
//   return false
// }

// 但是上面的做法太麻烦了，可以一个数组把多个判断的值装起来，直接判断 includes
const pathes = ['/home', '/fast', '/mine']

export default function BottomTab() {
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <img src={IconHome} />,
      activeIcon: <img src={IconHomeActive} />,
    },
    {
      key: '/fast',
      title: '快速刷题',
      icon: <img src={IconFast} />,
      activeIcon: <img src={IconFast} />
    },
    {
      key: '/mine',
      title: '我的',
      icon: <img src={IconMy} />,
      activeIcon: <img src={IconMyActive} />
    },
  ]

  const navigate = useNavigate();
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value: string) => {
    navigate(value)
  }

  return (
    <div className='bottom-tab' style={{ display: pathes.includes(pathname) ? 'block' : 'none' }}>
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={pathname == item.key ? item.activeIcon : item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}
